<template>
  <el-container :style="{ height: $store.state.mainContainerHeight - 40 + 'px' }">
    <el-main>
      <el-container>
        <el-main>
          <el-card class="photo-config-item">
            <div slot="header">
              工厂信息
            </div>
            <el-form
              ref="form"
              label-width="180px"
              :model="factoryForm.formData"
              :rules="factoryForm.rules"
              style="overflow-x:auto;"
            >
              <el-form-item
                label="厂家名称"
                prop="name"
              >
                <el-input
                  style="width: 220px"
                  placeholder="厂家名称"
                  v-model.trim="factoryForm.formData.name"
                  maxlength="50"
                  show-word-limit
                ></el-input>
              </el-form-item>

              <el-form-item
                label="账号"
                prop="account"
              >
                <span v-if="id > 0">{{ factoryForm.formData.account }}</span>
                <el-input
                  v-else
                  style="width: 220px"
                  v-model.trim="factoryForm.formData.account"
                  placeholder="请输入账号"
                  maxlength="20"
                  show-word-limit
                ></el-input>
              </el-form-item>

              <el-form-item
                v-if="!id"
                label="初始密码"
              > 12345 </el-form-item>

              <el-form-item
                label="手机号"
                prop="mobile"
              >
                <el-input
                  style="width: 220px"
                  placeholder="手机号"
                  v-model.trim="factoryForm.formData.mobile"
                  maxlength="50"
                  show-word-limit
                ></el-input>
              </el-form-item>

              <el-form-item
                label="厂家电话"
                prop="tel"
              >
                <el-input
                  style="width: 220px"
                  placeholder="厂家电话"
                  v-model.trim="factoryForm.formData.tel"
                  maxlength="50"
                  show-word-limit
                ></el-input>
              </el-form-item>

              <el-form-item
                label="厂家地址"
                prop="address"
              >
                <el-input
                  style="width: 350px"
                  placeholder="厂家地址"
                  v-model.trim="factoryForm.formData.address"
                  maxlength="150"
                  show-word-limit
                ></el-input>
              </el-form-item>

              <el-form-item
                label="禁用时间"
                prop="levelEndTime"
              >
                <el-date-picker
                  v-model="factoryForm.formData.disableTime"
                  align="right"
                  type="date"
                  value-format="yyyy-MM-dd 00:00:00"
                  placeholder="选择日期"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
                <div class="tips">达到禁用时间后，该工厂会被自动禁用</div>
              </el-form-item>

              <el-form-item
                label="是否启用"
                prop="enable"
              >
                <el-select
                  v-model="factoryForm.formData.enable"
                  value-key="name"
                  placeholder="状态"
                >
                  <el-option
                    v-for="(item, key) in $CONST.ACTIVE_STATUS"
                    :key="key"
                    :label="item.title"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>

            </el-form>
          </el-card>
        </el-main>
      </el-container>
    </el-main>

    <el-footer>
      <el-row
        type="flex"
        justify="center"
      >
        <el-button
          style="margin-right: 100px"
          @click="gotoList"
          v-waves
        >返回</el-button>
        <el-button
          type="primary"
          :loading="factoryForm.loading"
          @click="onSubmit"
          v-waves
        >{{ this.factoryForm.loading ? "提交中" : "保存" }}</el-button>
      </el-row>
    </el-footer>

  </el-container>
</template>

<script>
import factoryUserAPI from '@/api/factoryUser'
import factoryAPI from '@/api/factory'
import { mapGetters } from 'vuex'
export default {
  props: ['id'],
  name: 'info',
  components: {},
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now()
        },
        shortcuts: [
          {
            text: '一周后',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          },
          {
            text: '30天后',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 30)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一年后',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 365)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      dialogVisible: false,
      factoryForm: {
        formData: {
          id: null,
          name: null,
          levelId: null
        },
        loading: false,
        rules: {
          name: [
            { required: true, message: '请输入厂家名称', trigger: 'blur' }
          ],
          tel: [{ required: true, message: '请输入厂家电话', trigger: 'blur' }],
          enable: [
            { required: true, message: '请选择状态', trigger: 'change' }
          ],
          account: [
            {
              required: true,
              message: '请输入账号'
            },
            {
              min: 5,
              max: 20,
              message: '账号长度需在5到20个字符之间'
            },
            {
              validator: (rule, value, callback) => {
                if (this.id) {
                  return callback()
                }
                factoryUserAPI.checkAccount(value).then((res) => {
                  if (res.data) {
                    return callback(new Error('账号已存在，请重新输入'))
                  }
                  return callback()
                })
              },
              trigger: 'blur'
            }
          ]
        }
      }
    }
  },
  async created () {
    if (this.isEditMode) {
      const res = await factoryAPI.getById(this.id)
      this.factoryForm.formData = JSON.parse(JSON.stringify(res.data))
    }
  },
  computed: {
    ...mapGetters(['token']),
    isEditMode () {
      return this.id && this.id > 0
    }
  },
  methods: {
    gotoList () {
      this.$router.pushTo(this.$router.routesConfig.factoryList)
    },
    onSubmit () {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false
        }
        this.factoryForm.loading = true
        if (this.id) {
          factoryAPI
            .update(this.factoryForm.formData)
            .then(() => {
              this.factoryForm.loading = false
              this.$message.success('修改成功')
              this.gotoList()
            })
            .catch(() => (this.factoryForm.loading = false))
        } else {
          factoryAPI
            .insert(this.factoryForm.formData)
            .then(() => {
              this.factoryForm.loading = false
              this.$message.success('添加成功')
              this.gotoList()
            })
            .catch(() => (this.factoryForm.loading = false))
        }
      })
    }
  }
}
</script>
